<template>
	<view class="worker-page">
		<div class="statusBar" :style="{
			height:`${statusBarHeight}px`
		}"></div>
		<div :style="{
			height:`${statusBarHeight}px`
		}"></div>
		<view :style="{background:'#fff',padding:`${capsulePadding}px ${pagePadding}px`}">
			<up-input :style="`width:calc(100% - ${capsuleWidth + pagePadding}px)`" v-model="workOrderNo" placeholder="输入工单编号/客户户号/楼宇编号搜索"
				shape="circle" >
				<!-- suffixIcon="search" suffixIconStyle="font-size: 22px;color: #909399" -->
					<template #suffix>
					    <image @click="handleRefresh" slot="suffix" src="/static/images/worker/ic_search.png" style="width: 30rpx;height: 30rpx;"></image>
					</template>
			</up-input>
			<u-tabs :scrollable="false" :list="tabs" :activeStyle="{ color: '#014d99' }"
				:nactiveStyle="{ color: '#555555' }" lineColor="#014d99" @click="tabsClick"></u-tabs>
		</view>
		<view class="tag-list">
			<u-tag v-for="item in tagList" :key="item.text" :text="item.text" shape="circle"
				:bgColor="(workOrderStatus === item.id || (workOrderStatus === '' && item.id === '0')) ? '#014d99' : '#FFFFFF'"
				:color="(workOrderStatus === item.id || (workOrderStatus === '' && item.id === '0')) ? '#fff' : '#555555'"
				:borderColor="(workOrderStatus === item.id || (workOrderStatus === '' && item.id === '0')) ? '#014d99' : '#FFFFFF'" @click="tagListChange(item)"></u-tag>
		</view>
		<view class="page-content" :style="{ height: scrollViewHeight + 'px' }">
			<scroll-view
				v-if="list && list.length>0"
				scroll-y 
				:refresher-enabled="true" 
				:refresher-triggered="isRefreshing" 
				@refresherrefresh="handleRefresh" 
				@scrolltolower="loadMoreFunc" 
				:style="{ height: 'calc('+scrollViewHeight+'px - 40rpx)', overflow: 'auto'}" 
				class="scroll-container"
			>
					<view class="worker-item" v-for="(item,index) in list" :key="item.workOrderId + index">
						<image src="/static/images/worker/ic_xiangqing.png" class="xiangqing" @click="toDetail(item)"></image>
						<view class="worker-item_top">
							<view class="worker-content">
								<image src="/static/images/worker/img.png" class="worker-logo"></image>
								<view class="worker-info">
									<view class="worker-title">
										{{item.consName}} <image :style="`transform: rotate(${item.isUp === '1' ? 180 : 0}deg);`" src="/static/images/worker/ic_zhiding.png" @click=toWorkOrderUp(item.isUp,item.workOrderNo)></image>
									</view>
									<view class="desc-list">
										<view class="desc u-margin-bottom-12">
											工单编号：{{item.workOrderNo}}
										</view>
										<view class="desc u-margin-bottom-12">
											工单状态：{{item.workOrderStatusName}}
										</view>
										<view class="desc">
											楼宇名称：{{item.buildName}}
										</view>
										<view class="desc">
											工单等级：{{item.workOrderLevelName}}
										</view>
									</view>
								</view>
							</view>
							
							<view class="worker-btn" v-if="item.stepType === '30'" @click="handleWorker('接单',item)">
								<image src="/static/images/worker/worker.png" class="worker-set"></image>
								<view class="jiedan">
									接单
								</view>
							</view>
							<view class="worker-btn" v-if="item.stepType === '80'" @click="handleWorker('回单',item)">
								<image src="/static/images/worker/receipt.png" class="worker-set"></image>
								<view class="jiedan">
									回单
								</view>
							</view>
							<view class="worker-btn" v-if="item.stepType === '40'" @click="handleWorker('到达现场',item)">
								<image src="/static/images/worker/reach.png" class="worker-set"></image>
								<view class="jiedan">
									到达现场
								</view>
							</view>
							<view class="worker-btn" v-if="item.stepType === '70'" @click="handleWorker('巡查确认',item)">
								<image src="/static/images/worker/confirm.png" class="worker-set"></image>
								<view class="jiedan">
									巡查确认
								</view>
							</view>
							
							<view class="worker-btn" v-if="item.stepType === '50'" @click="handleWorker('异常确认',item)">
								<image src="/static/images/worker/error.png" class="worker-set"></image>
								<view class="jiedan">
									异常确认
								</view>
							</view>
							<view class="worker-btn" v-if="item.stepType === '65'" @click="handleWorker('运维确认',item)">
								<image src="/static/images/worker/operation.png" class="worker-set"></image>
								<view class="jiedan">
									运维确认
								</view>
							</view>
						</view>
						<!-- 根据朱经理要求召测功能先隐藏 -->
						<!-- <view class="worker-item_bottom">
							<view class="bottom-item" @click="handleTest">
								<image src="/static/images/worker/zhaoce.png"></image>
								召测
							</view>
							<view class="bottom-line"></view>
							<view class="bottom-item" @click="handleWorker('回单',item)">
								<image src="/static/images/worker/receipt.png"></image>
								回单
							</view>
						</view> -->
					</view>
				
				<u-loadmore :status="loadStatus" :load-text="{
					  loading: '加载中...',
					  nomore: '没有更多了',
					  loadmore: '上拉加载更多'
					}" />
			</scroll-view>
		</view>
	
	</view>
</template>

<script setup>
	import {
		getCurrentInstance, nextTick, ref
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	import {
		onShow
	} from '@dcloudio/uni-app'
	onShow(() => {
		const params = uni.getStorageSync('workerPageParams');
		console.log('params=======>',params)
		if (params) {
		  workOrderStatus.value = params.workOrderStatus;
		  uni.removeStorageSync('workerPageParams');
		}
	});
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const capsuleWidth = ref(0); // 胶囊宽度
	const capsulePadding = ref(0);
	const pagePadding = ref(0);
	const scrollViewHeight = ref(0)
	const workOrderNo = ref('') //顶部输入框
	
	const workOrderType = ref('')//工单类型，1：巡查工单，2：抢修工单，3：特殊工单
	const tabs = ref([{
		name: '全部',
	}, {
		name: '巡查',
	}, {
		name: '抢修'
	}, {
		name: '特殊'
	}])
	const tabsClick = (item) => {
		workOrderType.value = item.index === 0 ? '' : (item.index +'')
		console.log(workOrderType.value)
		handleRefresh()
	}
	
	const workOrderStatus = ref('')//工单状态，1：待处理，2：处理中，3：已处理，4：已终止
	const tagList = ref([{
			id: '0',
			text: "全部"
		},
		{
			id: '1',
			text: "待处理"
		},
		{
			id: '2',
			text: "处理中"
		},
		{
			id: '3',
			text: "已处理"
		},
		{
			id: '4',
			text: "已终止"
		},
	])
	const tagListChange = (item) => {
		workOrderStatus.value = item.id === '0' ? '' : item.id
		console.log(workOrderStatus.value)
		handleRefresh()
	}
	
	const loadStatus = ref('loadmore') // 加载状态（loadmore/loading/nomore）
	const list = ref([])
	const pageSize = ref(10)
	const pageNum = ref(1)
	const total = ref(0)
	const isRefreshing = ref(false)
	const handleRefresh = async() => {
		pageNum.value = 1;
		getList('refresh')
	}
	const loadMoreFunc = () => {
		if (loadStatus.value !== 'loadmore') return;
		pageNum.value++;
		getList();
	}
	const getList = async (type) => {
		if (loadStatus.value === 'nomore') return;
		console.log('type===>',type)
		if(type === 'refresh'){
			nextTick(()=>{
				isRefreshing.value = true
			})
		}
		loadStatus.value = 'loading';
		const res = await proxy.$http.POST('/aom/wechat/queryCommon',{
			obj:{
				data:{
					"mgtOrgCode": "",
					"workOrderLevel": "",
					"workOrderNo": workOrderNo.value,
					"workOrderType": workOrderType.value,
					"workOrderStatus": workOrderStatus.value
				},
				"pageNum": pageNum.value,
				"pageSize": pageSize.value
			},
			url:"queryPageWorkOrder"
		})
		
		if (res.code != '00000') {
			loadStatus.value = 'loadmore';
			return;
		}
		total.value = res.total;
		if (pageNum.value == 1) {
			list.value = res.data.list;
		} else {
			list.value = [...list.value, ...res.data.list]
		}
		// 判断是否还有下一页
		if (list.value.length >= total.value) {
			loadStatus.value = 'nomore';
		} else {
			loadStatus.value = 'loadmore';
		}
		console.log('type===>',type)
		if(type === 'refresh'){
			nextTick(()=>{
				isRefreshing.value = false
			})
		}
	};
	// 置顶与取消置顶
	// 取消置顶  workOrderUp/deleteWorkOrderUp
	// 置顶 workOrderUp/saveWorkOrderUp
	const toWorkOrderUp = async (isUp,workOrderNo) => {
		let timeNum = new Date().getTime()
		let url = isUp === '1' ? 'deleteWorkOrderUp' : 'saveWorkOrderUp'
		const res = await proxy.$http.POST('/aom/wechat/queryCommon',{
			obj:{
				"isUp": isUp === '1' ? null : '1',
				"upDate": timeNum,
				"upUserId": 123,
				"workOrderNo": workOrderNo
			},
			url,
		})
		handleRefresh()
		console.log('res------------>',res)
	}
	const toDetail = (item) => {
		uni.navigateTo({
		  url: `/pages/worker/detail?workOrderId=${item.workOrderId}&workOrderType=${item.workOrderType}`
		});
	} 
	const handleWorker = (pageName,item) => {
		uni.navigateTo({
		  url: `/pages/worker/handle?pageName=${pageName}&workOrderNo=${item.workOrderNo}&stepType=${item.stepType}`
		});
	}
	const handleTest = () => {
		uni.navigateTo({
		  url: `/pages/worker/testing`
		});
	}
	onLoad(() => {
		handleRefresh()
		uni.$on('refreshList',() => {
			handleRefresh()
		})
	});
	onUnload(() => {
		uni.$off('refreshList')
	})
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度
		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		capsuleWidth.value = res.width
		capsulePadding.value = res.top - statusBarHeight.value
		scrollViewHeight.value = systemInfo.windowHeight - (topHeight.value + statusBarHeight.value + 90)
	});
	
	
</script>

<style scoped lang="scss">
	.worker-page {
		background: #f1f1f1;
		height: 100vh;
	}

	.page-content {
		overflow: hidden;
		padding: 20rpx;
	}

	.tag-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}
	.scroll-container {
	  box-sizing: border-box;
	}
</style>